<template>
  <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="700px" ok-text="确认" cancel-text="取消"
    @ok="addFormSubmit" class="parOrder_modal">
    <a-alert message="生成次月账单会默认根据上月参保人账单和增减员计划，智能计算" style="margin-bottom: 10px;"></a-alert>
    <a-form layout="inline" :form="events_form" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
      <a-form-item label="姓名">
        <a-input v-decorator="['insureStaffName']" disabled></a-input>
      </a-form-item>
      <a-form-item label="身份证号">
        <a-input v-decorator="['idCard']" disabled></a-input>
      </a-form-item>
      <a-form-item label="个人养老">
        <a-input placeholder="请输入个人养老" v-decorator="['pensionPersonalPay']"></a-input>
      </a-form-item>
      <a-form-item label="公司养老">
        <a-input placeholder="请输入公司养老" v-decorator="['pensionCompanyPay']"></a-input>
      </a-form-item>
      <a-form-item label="个人医疗">
        <a-input placeholder="请输入个人医疗" v-decorator="['medicalPersonalPay']"></a-input>
      </a-form-item>
      <a-form-item label="公司医疗">
        <a-input placeholder="请输入公司医疗" v-decorator="['medicalCompanyPay']"></a-input>
      </a-form-item>
      <a-form-item label="个人失业">
        <a-input placeholder="请输入个人失业" v-decorator="['loseJobPersonalPay']"></a-input>
      </a-form-item>
      <a-form-item label="公司失业">
        <a-input placeholder="请输入公司失业" v-decorator="['loseJobCompanyPay']"></a-input>
      </a-form-item>
      <a-form-item label="个人工伤">
        <a-input placeholder="请输入个人工伤" v-decorator="['injuryPersonalPay']"></a-input>
      </a-form-item>
      <a-form-item label="公司工伤">
        <a-input placeholder="请输入公司工伤" v-decorator="['injuryCompanyPay']"></a-input>
      </a-form-item>
      <a-form-item label="个人生育">
        <a-input placeholder="请输入个人生育" v-decorator="['birthPersonalPay']"></a-input>
      </a-form-item>
      <a-form-item label="公司生育">
        <a-input placeholder="请输入公司生育" v-decorator="['birthCompanyPay']"></a-input>
      </a-form-item>
      <a-form-item label="个人大病">
        <a-input placeholder="请输入个人大病" v-decorator="['bigIllPersonalPay']"></a-input>
      </a-form-item>
      <a-form-item label="公司大病">
        <a-input placeholder="请输入公司大病" v-decorator="['bigIllCompanyPay']"></a-input>
      </a-form-item>
      <a-form-item label="个人公积金">
        <a-input placeholder="请输入个人公积金" v-decorator="['fundsPersonalPay']"></a-input>
      </a-form-item>
      <a-form-item label="公司公积金">
        <a-input placeholder="请输入公司公积金" v-decorator="['fundsCompanyPay']"></a-input>
      </a-form-item>
      <a-form-item label="公司残保金">
        <a-input placeholder="请输入公司残保金" v-decorator="['disabilityCompanyPay']"></a-input>
      </a-form-item>
      <a-form-item label="其他费用">
        <a-input placeholder="请输入其他费用" v-decorator="['otherCompanyPay']"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {
  editInsureOrderStaffFee
} from "@/api/human/ensurePayOrder"
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      submitLoading: false,

      insureOrderStaffId: '',
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开编辑弹窗 
    async add(rows) {
      this.visible = true;
      this.title = '编辑详情';
      this.insureOrderStaffId = rows.insureOrderStaffId
      this.$nextTick(() => {
        let values = this.events_form.getFieldsValue();
        for (var key in rows) {
          values[key] = rows[key]
        }
        this.events_form.setFieldsValue(values);
      });
    },
    // 提交
    async addFormSubmit() {
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (this.insureOrderStaffId) {
            values.insureOrderStaffId = this.insureOrderStaffId;
          }
          this.submitLoading = true;
          const { code } = await editInsureOrderStaffFee(values);
          this.submitLoading = false;
          if (code === '1') {
            this.visible = false;
            this.$message.success('操作成功');
            this.$emit('on-ok');
          }
        }
      });
    }
  }
}
</script>
<style lang="less">
.parOrder_modal {
  .ant-form-item {
    width: 50%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
